<template>
  <primitive :object="arrow" />
</template>
<script lang="ts" setup>
import * as THREE from 'three'
import { Vector as VectorGenerator } from '../../hooks/shapes'

const props = defineProps<{
  data: VectorGenerator
}>()

const arrow = shallowRef()

watchEffect(() => {
  const { vertices, direction, length } = props.data

  arrow.value = new THREE.ArrowHelper(
    new THREE.Vector3().fromArray(direction),
    new THREE.Vector3().fromArray(vertices[0]),
    length,
    'orange',
  )
})
</script>
